import React, { useEffect, useState } from 'react';
import axios from 'axios'
import { NavBar, Cell, CellGroup, Image, DropdownMenu } from 'react-vant'
import { useDispatch, useSelector } from 'react-redux';
const App = () => {
  // 组件内状态
  // const [list, setList] = useState([]);

  // const [params, setParams] = useState({
  //   title: '',
  //   count: ''
  // });
  // 从仓库获取状态
  const list = useSelector(state => state.list.list)
  const params = useSelector(state => state.list.params)

  const dispatch = useDispatch()

  const getList = async (params) => {
    const resp = await axios.get('/api/list', { params: params });
    console.log(resp.data.data);
    // setList(resp.data.data)
    dispatch({ type: 'setList', payload: resp.data.data })
  }

  const option1 = [
    // "北京会议室1","北京会议室2","北京会议室3"
    { text: '北京会议室1', value:  '北京会议室1'},
    { text: '北京会议室2', value:  '北京会议室2'},
    { text: '北京会议室3', value:  '北京会议室3'},
  ]
  const option2 = [
    { text: '2人间', value:  '2'},
    { text: '4人间', value:  '4'},
    { text: '10人间', value:  '10'},
  ]
  const onChange = (value) => {
    dispatch({ type: 'setParams', payload: value })
    getList(value);
  }

  useEffect(() => {
    getList(params)
  }, [])

  return (
    <div>
      <NavBar title="会议室"></NavBar>
      <DropdownMenu onChange={(value) => onChange(value)}>
        <DropdownMenu.Item name='title' options={option1} />
        <DropdownMenu.Item name='count' options={option2} />
      </DropdownMenu>
      <CellGroup>
        {
          list.map((v, i) => {
            return <Cell
              key={v.id}
              icon={<Image src={v.image} width={44} height={44}></Image>}
              title={v.title}
              label={v.desc}
              value={v.count + '人间'}
            ></Cell>
          })
        }
      </CellGroup>
    </div>
  )
}

export default App